<template>
  <div>
    <div class="img-list">
      <div
        class="img-main"
        v-for=" item in slide"
        :key="item.id"
      >
        <div class="img-delete">
          <el-button
            size="mini"
            icon="el-icon-delete"
            circle
          ></el-button>
        </div>
        <img
          @click="click(item)"
          :src="item.msrc"
          alt=""
        >
        <div class="edit-input-wrap">
          <div class="edit-input">
            <el-input
              v-show="item.edit"
              size="mini"
              v-model="item.title"
            ></el-input>
            <span
              class="edit-title"
              v-show="!item.edit"
            >{{ item.title }}</span>
          </div>
          <div class="edit-wrap">
            <el-button
              v-show='!item.edit'
              type="primary"
              @click='item.edit=true'
              size="mini"
              icon="edit"
            >编辑</el-button>
            <el-button
              v-show='item.edit'
              type="success"
              @click='item.edit=false'
              size="mini"
              icon="check"
            >完成</el-button>
          </div>
          <!-- 文字描述 -->
        </div>
      </div>
    </div>
    <div
      class="big_img"
      v-show="show&&bigSrc"
      @click.stop="clickBig()"
    >
      <img
        :src="bigSrc"
        alt=""
        width="1200"
        height="900"
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      bigSrc: '',
      slide: [ // 图片列表
        {
          edit: false,
          id: 1,
          src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
          msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
          alt: 'picture1',
          title: 'Image Caption 1',
          w: 600,
          h: 400
        },
        {
          edit: false,
          id: 2,
          src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
          msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
          alt: 'picture2',
          title: 'Image Caption 2',
          w: 1200,
          h: 900
        }, {
          edit: false,
          id: 3,
          src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
          msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
          alt: 'picture1',
          title: 'Image Caption 1',
          w: 600,
          h: 400
        },
        {
          edit: false,
          id: 4,
          src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
          msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
          alt: 'picture1',
          title: 'Image Caption 1',
          w: 600,
          h: 400
        }
      ]
    }
  },
  methods: {
    clickBig() {
      this.show = false
    },
    click(item) {
      // this.bigSrc = item.src
      this.bigSrc = item.msrc
      const img = new Image()
      img.src = item.src
      img.onload = () => {
        this.bigSrc = img.src
      }
      this.show = true
      // if (this.show) {
      //   this.show = false
      // }
    }
  }
}
</script>
<style lang="less" scoped>
.img-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;

  .img-main {
    position: relative;
    cursor: zoom-in;
    margin-bottom: 5px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    //   margin: 5px;
    .img-delete {
      position: absolute;
      top: 5px;
      right: 5px;
      .el-button {
        background: rgba(0, 0, 0, 0.1);
        color: #dcdfe6;
        &:active,
        &:hover {
          border-color: #ffffff;
        }
      }
    }
    img {
      border-radius: 2px;
      width: 260px;
      height: 160px;
    }
    .edit-input-wrap {
      padding: 5px;
      display: flex;
      .edit-input {
        flex: 1;
        .el-input {
          // position: relative;
          // font-size: 14px;
          // display: inline-block;
          width: 90%;
        }
        .edit-title {
          height: 28px;
          line-height: 28px;
        }
      }
      .edit-wrap {
        width: 56px;
        .el-button + .el-button {
          margin-left: 0;
        }
      }
    }
  }
}

.big_img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 50%;
  // left: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  background: rgba(0, 0, 0, 0.3);
  cursor: zoom-out;

  img {
    position: fixed;
    top: 50%;
    // left: 0;
    left: 50%;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    z-index: 99;
  }
}
</style>